<template>
    <div>
        <el-dialog center class="global-dialog" v-model="dialogVisable" width="800px" top="10vh" :show-close="true"
            :close-on-click-modal="false" @close="close">
            <template #title>
                <div class="my-header">
                    <el-tabs v-model="tabId" class="demo-tabs">
                        <el-tab-pane label="基本信息" name="1">
                            <el-form :model="diaForm" ref="DiaForm" :rules="rules" status-icon label-width="110px" status>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="著作名称" prop="name">
                                            <el-input  placeholder="请输入" v-model="diaForm.name" style="width: 100%" maxlength="20" show-word-limit :disabled="1" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="ISBN名称" prop="isbnBookNo">
                                            <el-input placeholder="请输入" v-model="diaForm.isbnBookNo" style="width: 100%" maxlength="20" show-word-limit :disabled="1" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="著作级别" prop="workLevelId">
                                            <el-select clearable v-model="diaForm.workLevelId" placeholder="著作级别"
                                                @change="changeWorkLevel" style="width: 100%">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in workLevelList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="编著属性" prop="workAttributeId">
                                            <el-select clearable v-model="diaForm.workAttributeId" placeholder="编著属性"
                                                @change="changeWorkAttribute" style="width: 100%" :disabled="1">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in workAttributeList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="所属项目" prop="projectId">
                                            <el-select v-model="diaForm.projectId" placeholder="请选择" style="width: 100%"
                                                @change="changeProject" :disabled="1">
                                                <el-option :label="item.projectname" :value="item.id" :key="item.id"
                                                    v-for="item in projectList" />
                                            </el-select>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="年份" prop="pyear">
                                            <el-select v-model="diaForm.pyear" placeholder="请选择" style="width: 100%" :disabled="1">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in yearList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="技术分类" prop="techClassId">

                                            <el-select clearable v-model="diaForm.techClassId" placeholder="请选择"
                                                @change="changeTechClass" style="width: 100%" :disabled="1">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in techClassList" />
                                            </el-select>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">

                                        <el-form-item label="维护单位" prop="maintainUnitId">
                                            <el-select clearable v-model="diaForm.maintainUnitId" placeholder="维护单位"
                                                @change="changeUnit" style="width: 100%" :disabled="1">
                                                <el-option :label="item.belongingUnit" :value="item.belongingCode"
                                                    :key="item.belongingCode" v-for="item in unitNameList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="企业排名" prop="enterpriseRanking">
                                            <el-select v-model="diaForm.enterpriseRanking" placeholder="请选择"
                                                style="width: 100%"  :disabled="1">

                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in RankingList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="语言" prop="languageId">
                                            <el-select v-model="diaForm.languageId" placeholder="请选择" style="width: 100%"
                                                @change="changeLange" :disabled="1">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in languageList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>


                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="价格" prop="price">
                                            <el-input placeholder="请输入" v-model.number="diaForm.price" maxlength="8" show-word-limit
                                                      style="width: 100%" :disabled="1" />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="页数" prop="pageNumber">
                                            <el-input placeholder="请输入" v-model="diaForm.pageNumber" maxlength="8" show-word-limit
                                                      style="width: 100%"  :disabled="1"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="字数" prop="wordCount">
                                            <el-input placeholder="请输入" v-model="diaForm.wordCount" style="width: 100%" maxlength="8" show-word-limit :disabled="1"  />
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-form-item label="出版社" prop="publisher">
                                    <el-input placeholder="请输入" v-model="diaForm.publisher" style="width: 100%" maxlength="20" show-word-limit  :disabled="1" />
                                </el-form-item>

                                <el-form-item label="出版地点" prop="publicAddress">
                                    <el-input placeholder="请输入" v-model="diaForm.publicAddress" style="width: 100%" maxlength="20" show-word-limit  :disabled="1" />
                                </el-form-item>

                                <el-form-item label="版本" prop="version">
                                    <el-input placeholder="请输入" v-model="diaForm.version" style="width: 100%" maxlength="20" show-word-limit  :disabled="1" />
                                </el-form-item>


                                <el-form-item label="关键词" prop="keyword">
                                    <el-input v-model="diaForm.keyword" :autosize="{ minRows: 2, maxRows: 6 }"
                                        type="textarea" placeholder="请输入" maxlength="20" show-word-limit  :disabled="1" />
                                </el-form-item>

                                <el-form-item label="说明" prop="remark">
                                    <el-input v-model="diaForm.remark" :autosize="{ minRows: 2, maxRows: 6 }"
                                        type="textarea" placeholder="请输入" maxlength="50" show-word-limit  :disabled="1" />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="相关附件" name="2">
                            <PlatformFiles :files="files" @filesParams="filesParams"></PlatformFiles>
                        </el-tab-pane>
                        <el-tab-pane label="变更记录" name="3" v-if="id">
                            <Record :changeLogs="changeLogs"></Record>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">关闭</el-button>
<!--                    <el-button type="primary" @click="save">保存</el-button>-->
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {
addForm,
editForm,
getDetailById,
getDictionary,
getProject,
getUnit
} from "@/views/science/api/academic";
import PlatformFiles from '@/views/science/components/platformFiles/platformFilesxq.vue';
import Record from '@/views/science/components/record/record.vue';
import { tips } from "@/views/science/components/tips/tips";
import { onMounted, reactive, ref, toRefs, watch } from "vue";


export default {
    components: {
        PlatformFiles, Record
    },
    props: {
      dialogVisablexq: {
            type: Boolean,
            default: false,
        },

        // falg  1:新增  2:编辑  3:详情
        flag: {
            type: String,
            default: 1,
        },
        id: {
            type: String,
            default: '',
        }
    },
    setup(props, { emit }) {


        watch(
            () => props.id,

            () => {
                console.log(props.id)
                // 深度监听.只有在id存在的时候调用详情的接口
                if (props.id) {
                    getDetail(props.id)
                }
            },

            { deep: true, immediate: true }
        );
        // 发送请求
        onMounted(() => {
            // 获取数据字典


            getCodeList()

            getUnitList();


            getProjectList()



        });

        let DiaForm = ref();
        let data = reactive({
            tabId: '1',



            workLevelList: [],
            workAttributeList: [],
            techClassList: [],
            languageList: [],
            RankingList: [],
            unitNameList:[],

            projectList: [],//项目

            memberList: [],
            unitList: [],


            yearList: [
                { itemText: '2023年', itemValue: '2023' },
                { itemText: '2022年', itemValue: '2022' },
                { itemText: '2021年', itemValue: '2021' },
                { itemText: '2020年', itemValue: '2020' },
                { itemText: '2019年', itemValue: '2019' }
            ],//年份


            diaForm: {
                id: '',
                name: '',
                isbnBookNo: "",
                workLevelId: '',
                workLevel: '',
                workAttributeId: '',
                workAttribute: '',
                pyear: '',
                projectId: '',
                project: '',
                techClassId: '',
                techClass: '',
                maintainUnitId: '',
                maintainUnit: '',
                enterpriseRanking: '',
                languageId: '',
                language: '',
                price: '',
                publisher: '',
                publicAddress: '',
                pageNumber: '',
                wordCount:'',
                version: '',
            },


            files: [],

            changeLogs: []
        });

        // 规则校验
        let rules = reactive({

            name: [
                { required: true, message: '请输入著作名称', trigger: 'blur' },
            ],
            isbnBookNo: [
                { required: true, message: '请输入ISBN书号', trigger: 'change', },
            ],
            workLevelId: [
                { required: true, message: '请选择著作级别', trigger: 'change', },
            ],
            workAttributeId: [
                { required: true, message: '请选择编著属性', trigger: 'change', },
            ],
            projectId: [
                { required: true, message: '请选择所属项目', trigger: 'change', },
            ],
            pyear: [
                { required: true, message: '请选择年份', trigger: 'change', },
            ],
            techClassId: [
                { required: true, message: '请选择技术分类', trigger: 'change', },
            ],
            maintainUnitId: [
                { required: true, message: '请选择维护单位', trigger: 'change' },
            ],
            enterpriseRanking: [
                { required: true, message: '请选择企业排名', trigger: 'change' },
            ],

            languageId: [
                { required: true, message: '请选择语言', trigger: 'change' },
            ],

            price: [
                { required: true, message: '请输入价格', trigger: 'change' },
            ],


            publisher: [
                { required: true, message: '请输入出版社', trigger: 'change' },
            ],
            publicAddress: [

                { required: true, message: '请输入出版地点', trigger: 'change' },
            ],
            pageNumber: [

                { required: true, message: '请输入字数', trigger: 'change' },
            ],
            version: [
                { required: true, message: '请输入版本', trigger: 'change' },
            ],
            wordCount: [
                { required: true, message: '请输入字数', trigger: 'change' },
            ],


        });



        // 著作级别,编著属性,技术分类,语言,企业排名===>数据字典

        let getCodeList = () => {

            getDictionary(['KJSL_ACADEMIC_WORK_LEVEL', 'KJSL_SOFT_STATE', 'KJSL_BUSINESS_SECTOR', 'KJSL_LANGUAGE', 'KJSL_ENTERPRISE_RANKING']).then((res) => {

                data.workLevelList = res.data.data.KJSL_ACADEMIC_WORK_LEVEL;

                data.workAttributeList = res.data.data.KJSL_SOFT_STATE;

                data.techClassList = res.data.data.KJSL_BUSINESS_SECTOR;

                data.languageList = res.data.data.KJSL_LANGUAGE;

                data.RankingList = res.data.data.KJSL_ENTERPRISE_RANKING;


            });
        };


        // 项目

        let getProjectList = () => {

            getProject({}).then((res) => {

                data.projectList = res.data.data;
            });
        };



        // 保存
        let save = () => {


            DiaForm.value.validate((valid) => {

                // 校验通过
                if (valid) {
                    //flag 1 新增  2 编辑  3  详情
                    if (props.flag == 1) {

                        data.diaForm.id = '';


                        addForm(
                            {
                                baseInfo: data.diaForm,
                                fileList: data.files,
                                memberList: data.memberList,
                                unitList: data.unitList,
                            }
                        ).then(() => {

                            tips("新增成功", "success");

                            DiaForm.value.resetFields();

                            emit("changeDialog", '1');

                        });


                    } else {
                        editForm(
                            {
                                baseInfo: data.diaForm,
                                fileList: data.files,
                                memberList: data.memberList,
                                unitList: data.unitList,
                            }
                        ).then(() => {

                            tips("编辑成功", "success");

                            DiaForm.value.resetFields();

                            emit("changeDialog", '1');

                        });

                    }
                }


            });
        }


        let filesParams = (params) => {

            data.files = params
        }


        // 单位
        let getUnitList = () => {

            getUnit({}).then((res) => {
                data.unitNameList = res.data.data;
            });
        };


        //著作级别

        let changeWorkLevel = (id) => {

            let itemText = data.workLevelList.find(item => item.itemValue == id).itemText

            data.diaForm.workLevel = itemText

        }

        // 编著属性

        let changeWorkAttribute = (id) => {


            let itemText = data.workAttributeList.find(item => item.itemValue == id).itemText

            data.diaForm.workAttribute = itemText

        }

        // 所属项目

        let changeProject = (id) => {

            let itemText = data.projectList.find(item => item.id == id).projectname

            data.diaForm.project = itemText
        }

        // 技术分类

        let changeTechClass = (id) => {

            let itemText = data.techClassList.find(item => item.itemValue == id).itemText

            data.diaForm.techClass = itemText
        }

        //   单位

        let changeUnit = (id) => {

            let itemText = data.unitNameList.find(item => item.belongingCode == id).belongingUnit

            data.diaForm.maintainUnit = itemText
        }


        let changeLange = (id) => {

            let itemText = data.RankingList.find(item => item.itemValue == id).itemText

            data.diaForm.language = itemText

        }





        // 通过详情查询id

        let getDetail = async (id) => {

            let res = await getDetailById(id);

            data.diaForm = res.data.data.info

            data.files = res.data.data.files

            data.changeLogs = res.data.data.changeLogs

        };





        // 关闭清除对话框里面的数据,附件.变更记录也要删除
        // tabId也要设置初始值,否则在电点击编辑record,新增打开会出现空白页

        let close = () => {

            data.tabId = '1';

            DiaForm.value.resetFields();

            data.files = [];

            data.changeLogs = [];

            emit("changeDialogxq");
        };

        return {
            DiaForm,
            filesParams,
            rules,
            changeWorkLevel,
            changeWorkAttribute,
            changeProject,
            changeTechClass,
            getUnitList,
            changeUnit,
            changeLange,
            getProjectList,
            getCodeList,
            ...toRefs(data),
            close,
            save
        };
    },
};
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: end;
}

:deep(.el-dialog__body) {
    display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
</style>
